<template>
  <view class="page">
    <view class="b-title">
      <view
        class="b-title__item"
        :class="[index == tabIndex ? 'b-title__item--active' : ' ']"
        v-for="(name,index) in tabs"
        :key="index"
        @tap="tabChange(index)"
      >{{name}}
      </view>
    </view>

    <view
      class="aui-news-box"
      v-if="tabIndex == 0"
    >
      <view
        href="javascript:;"
        v-for="(list, i) in buyerList"
        :key="i"
        @tap="handleMsg(list.currentname,list.current,i,'/pages/ChatPage/index')"
      >
        <view
          class="aui-news-item"
          v-if="shopId == list.target"
        >
          <view class="aui-news-item-hd">
            <img
              :src="list.head ? 'https://expay-mall.s3-sa-east-1.amazonaws.com'+list.head : '/sell/h5/static/img/head1.png'"
              alt=""
            >
          </view>
          <view class="aui-news-item-bd">
            <h4>{{list.currentname}}</h4>
            <p>{{list.msg}}</p>
          </view>
          <span class="aui-news-item-fr">{{list.msgtime}}</span>
          <view
            class="dot"
            v-if="list.num"
          >{{list.num}}
          </view>
        </view>
      </view>
      <view
        class="none"
        v-if="!buyerList.length"
      >
        暂无消息...
      </view>
    </view>

    <!-- 通知 -->
    <view
      class="aui-news-box"
      v-if="tabIndex == 1"
    >
      <view
        href="javascript:;"
        class="aui-news-item"
        @tap="handleInform('/pages/Message/inform')"
        v-for="(item,index) in informList "
        :key="index"
      >
        <view class="aui-news-item-hd">
          <img
            src="/sell/h5/static/img/tzicon.png"
            alt=""
          >
        </view>
        <view class="aui-news-item-bd">
          <h4>{{item.title}}</h4>
          <p>{{item.content}}</p>
        </view>
        <span class="aui-news-item-fr">{{item.sendTime}}</span>
        <view
          class="dot"
          v-if="item.num"
        >{{item.num}}
        </view>
      </view>
      <view
        class="none"
        v-if="!informList.length"
      >
        暂无消息...
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      shopId: uni.getStorageSync('shopInfo').shopId,
      dotFlag: uni.getStorageSync('dot_flag'),
      tabIndex: 0,
      title: 'Hello',
      tabs: [' 消息', '通知'],
      informData: []
    }
  },
  onLoad(opt) {
    // console.log(this.buyerList)
  },

  onShow() {
    console.log('消息列表show')
    this.calculate_msg()
    this.$store.dispatch(`buyerList/get_buyerList`, uni.getStorageSync('buyerList'));
    this.$store.dispatch(`inform/get_informList`, uni.getStorageSync('informList'));
  },
  computed: {
    ...mapState({
      buyerList: state => state.buyerList.list,
      informList: state => state.inform.informList,
    })
  },

  methods: {
    calculate_msg() {  //已读消息后重新计算
      let messageTotal = 0
      let arrMsgTotal = [...uni.getStorageSync('buyerList'), ...uni.getStorageSync('informList')]
      // console.log(arrMsgTotal)
      arrMsgTotal.forEach(item => {
        messageTotal += item.num
      })
      uni.setStorageSync('messageTotal', messageTotal);
      this.$store.dispatch(`messageTotal/get_messageTotal`, messageTotal);
      messageTotal ? uni.setTabBarBadge({ index: 1, text: String(messageTotal) }) : uni.hideTabBarRedDot({ index: 1 })
    },
    tabChange(i) {
      this.tabIndex = i
    },
    handleInform(url) {
      let informList = uni.getStorageSync('informList')
      informList[0].num = 0
      // console.log(informList)
      uni.setStorageSync('informList', informList)
      uni.navigateTo({
        url
      });
    },
    handleMsg(name, sendId, i, url) {
      let buyerList = uni.getStorageSync('buyerList')
      console.log(i)
      buyerList[i].num = 0
      console.log(buyerList)
      uni.setStorageSync('buyerList', buyerList)
      var pages = getCurrentPages();
      uni.navigateTo({
        url: `${url}?name=${name}&&sendId=${sendId}&buyersIndex=${i}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style/style.css';
@import '@/scss';

.page {
  overflow-x: hidden;
  touch-action: pan-x;
}
@include b(title) {
  padding: 20upx 38upx 0 38upx;
  background: #fff;
  display: flex;
  @include e(item) {
    @include size(50%, 60upx);
    @include flex-center;
    border: 1px solid #0079fe;
    color: #0079fe;
    border-radius: 4upx;
    @include m(active) {
      background: #0079fe;
      color: #fff;
    }
  }
}
@include b(inform) {
  padding: 30upx;
  @include e(item) {
    background: #fff;
  }
  @include e(item) {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20upx;
    padding: 30upx;
    .t1 {
      font-size: 32upx;
    }
    .t2 {
      padding: 10upx 0;
    }
  }
}
.none {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
}
</style>
